<!-- 动态表单设置组件 -->
<template>
  <div class="setUpForm" id="setUpForm">
    <!--  -->
    <LeftConfig
      :tabCodeList="tabCodeList"
      :layout="layout"
      @layoutChange="emit('update:layout', $event)"
    />
    <CenterConfig
      @choiceComponent="choiceComponent"
      :choiceUuid="componentObj.uuid"
      v-model:set-up-list="copySetUpList"
      :layout="layout"
      class="centerConfig"
      ref="centerRef"
    />
  </div>
  <RightDrawer
    ref="rightDrawer"
    v-model:componentObj="componentObj"
    @componentObjChange="componentObjChange"
  />
</template>

<script setup lang="ts">
import { ref, reactive, watch, watchEffect } from 'vue';
import mitter from '@/utils/mitt';
import clonedeep from 'lodash.clonedeep';

const props = withDefaults(
  //参数说明
  defineProps<{
    tabCodeList: string[]; // tab要显示的tabcode列表
    setUpList: any[]; // 组件列表
    layout: string; // a-form的layout属性
  }>(),
  {
    setUpList: () => [[]]
  }
);

const emit = defineEmits(['update:layout']);

let centerRef = ref(); // 中间表单的ref
const copySetUpList = ref(clonedeep(props.setUpList));

defineExpose({ copySetUpList, centerRef }); // 抛出处理过后的列表
watch(
  () => props.setUpList,
  (val: any) => {
    copySetUpList.value = val;
  },

  {
    deep: true
  }
);

// 组件设置的参数
const componentObj = reactive({
  code: null,
  componentType: null,
  props: null,
  required: 2,
  span: 12,
  uuid: '',
  name: null,
  isMust: 2,
  isProcessConditions: 2
});
const rightDrawer = ref(); // 获取rightDrawer元素
//点击组件被选中时
const choiceComponent = (element: any) => {
  console.log('====================================');
  console.log(element);
  console.log('====================================');
  componentObj.code = element.code;
  componentObj.componentType = element.componentType;
  componentObj.props = JSON.parse(element.props);
  componentObj.required = element.required;
  componentObj.span = element.span;
  componentObj.uuid = element.uuid;
  componentObj.name = element.name;
  componentObj.isMust = element.isMust;
  // componentObj.isProcessConditions = element.isProcessConditions;
  rightDrawer.value.visible = true;
};

let currIndex = 0;
watchEffect(() => {
  mitter.on('formTabChange', (res: any) => {
    currIndex = res;
  });
  // mitter.emit('tabsChange', centerRef.value.tabList);
});
//组件被设置时
const componentObjChange = (data: any) => {
  console.log('====================================data');
  console.log(data);
  console.log(copySetUpList.value[currIndex]);

  console.log('====================================');
  const changeIndex = copySetUpList.value[currIndex].componentModel.findIndex(
    (item: any) => item.uuid === componentObj.uuid
  );
  console.log(changeIndex);

  copySetUpList.value[currIndex].componentModel[changeIndex].name = data.name;
  copySetUpList.value[currIndex].componentModel[changeIndex].span = data.span;
  copySetUpList.value[currIndex].componentModel[changeIndex].required =
    data.required;
  copySetUpList.value[currIndex].componentModel[changeIndex].isMust =
    data.isMust;
  // copySetUpList.value[currIndex][changeIndex].isProcessConditions =
  //   data.isProcessConditions;
  copySetUpList.value[currIndex].componentModel[changeIndex].props = data.props;
  // JSON.stringify(data.props);
  console.log(copySetUpList.value[currIndex].componentModel[changeIndex]);
};
</script>

<style lang="less" scoped>
.setUpForm {
  position: relative;
  display: flex;
  // align-items: center;
  justify-content: center;
  background: rgb(243, 243, 243);
  height: 100%;

  .centerConfig {
    position: relative;
    left: 200px;
  }
}
</style>
